<template>
<div id="box">
    <transition appear tag="div">
        <div class="container">
            <img src="http://127.0.0.1:3000/static/img/advertising/advertising.png" alt="">
        </div>
    </transition>
</div>
</template>
<script>
export default{

}
</script>
<style lang='less' scoped>
#box{
    width: 100%;
    display: flex;
    justify-content: center;
    padding:10px 0;
}
/* v-enter 【进入之前，元素的起始状态】 */
/* v-leave-to 【动画离开之后，离开的终止状态】 */
.v-enter,
.v-leave-to {
    opacity: 0;
    transform: translateX(-150px);
}
/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active{
    transition: all 0.8s ease;
}
.container{
    width: 95%;
   
    img{
        border-radius: 20px;
        width:100%
    }
}
</style>